<template>
	<view class="findPassword">
		<view class="header">
	
			<view class="info">
					<view class="item">
						
						<input class="uni-input"  type="number" maxlength="11" v-model="mobile" placeholder='请输入手机号' placeholder-style="color:#cccccc">
					</view>
					<view class="item">
							<view class="codeInput">
								<input class="uni-input"  type="number"  v-model="vCode" placeholder='短信验证码' placeholder-style="color:#cccccc">
							</view>	
							<view class="getCode" >
								<button class='button' :class="{gray:gray}" @click="getCode" :disabled="!active">{{sendSmsText}}</button>
							</view>
							
					</view>
					<view class="item">
						
						<input class="uni-input passwordInput" password type="text"  minlength="8" maxlength="20" v-model="password" placeholder='请输新密码' placeholder-style="color:#cccccc">
					</view>
				
				
			</view>
			
			
			
		</view>
			
		<view class="footer">
			<view class="login_bottom">
				<view>密码必须是8~20个英文字母、数字或符合（除空格）</view>
			</view>
			<view class="register_btn" @click="userResetPwd">提交</view>
			
		</view>
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../common/util.js');
export default {
    data() {
        return {
            mobile: '',
            vCode: '',
            password: '',
            sendSmsText: '获取验证码',
            active: true,
						gray:false,
        };
    },
    methods: {
        userResetPwd() {
            if (!util.isMobile(this.mobile)) {
                uni.showToast({
                    title: '请输入正确的手机号码！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (!this.vCode) {
                uni.showToast({
                    title: '验证码不能为空',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (this.password.length < 8 || this.password.length > 20) {
                uni.showToast({
                    title: '请输入8到20位密码',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            uni.showLoading({
                title: '重置密码...'
            });
            util.ajax(
                'userResetPwd',
                {
                    mobile: this.mobile,
                    vCode: this.vCode,
                    password: this.password,
                    passwordTry: this.password
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        uni.showToast({
                            title: '密码已修改，请登录！',
                            icon: 'none',
                            duration: 1000
                        });
                        setTimeout(() => {
                            uni.redirectTo({
                            	 url: './index'
                            })
                        }, 600);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data)
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        getCode() {
            if (!util.isMobile(this.mobile)) {
                uni.showToast({
                    title: '请输入正确的手机号码！',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            util.ajax(
                'mobileCheckRegistered',
                {
                    mobile: this.mobile
                },
                data => {
                    let json = data.data;
                    if (!json.status) {
                        uni.showToast({
                            title: '正在发送短信...',
                            icon: 'none',
                            duration: 1000
                        });
                        util.ajax(
                            'mobileValidationCode',
                            {
                                mobile: this.mobile,
                                findPassword: true
                            },
                            data => {
                                let json = data.data;
                                if (json.status) {
																		this.gray = true;
                                    this.active = false;
                                    let total = 60;
                                    this.sendSmsText = total + 's后重发';
                                    this.timer = setInterval(() => {
                                        total--;
                                        this.sendSmsText = total + 's后重发';
                                        if (total <= 0) {
                                            clearInterval(this.timer);
                                            this.timer = null;
                                            this.sendSmsText = '获取验证码';
                                            this.active = true;
											this.gray = false;
                                        }
                                    }, 1000);
                                    uni.showToast({
                                        title: '短信发送成功,请注意查收!',
                                        icon: 'none',
                                        duration: 1000
                                    });
                                } else {
                                    uni.showToast({
                                        title: json.message,
                                        icon: 'none',
                                        duration: 1000
                                    });
                                }
                            }
                        );
                    } else {
                        uni.showToast({
                            title: '手机号未注册，请重新输入!',
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {}
            );
        }
    },
    components: {
        uniIcon
    }
};
</script>

<style lang="less">
@import '../../common/icon.css';
// @import '../../common/uni.css';
.uni-input {
    width: 100%;
    padding-left: 0;
}
page {
    background: white;
}
.getCode {
    button {
        background: white !important;
    }
}
.red {
    color: #ff1268;
}


.findPassword {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: white;
	padding: 0 30upx;
    .header {
        flex-direction: column;

        .info {
            width: 100%;
            margin: 0 auto;
            flex-direction: column;
            box-sizing: border-box;
            .item {
                flex-grow: 1;
                border-bottom: 1px solid #eeeeee;
                height: 100upx;
                align-items: center;
				font-size:30upx;
                input {
                }
                .codeInput {
                    width: 60%;
                }
            }
        }
        .getCode {
            width: 40%;
            border-left: 1px solid #eeeeee;
            box-sizing: border-box;
            flex-grow: 2;
            justify-content: center;
            .button {
                color: #ff1268;
                margin: 0 !important;
            }
						.gray {
							color: #999999;
						}
        }
    }
    .footer {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
        .register_btn {
            background: #ff1268;
            font-size: 34upx;
            width: 100%;
            height: 100upx;
            justify-content: center;
            align-items: center;
            border-radius: 5upx;
            margin: 80upx auto 0;
            background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
            background: -o-linear-gradient(to right, #ff48ac, #ff1268);
            background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
            background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
            background: linear-gradient(to right, #ff48ac, #ff1268);
            color: white;
        }
        .login_bottom {
            color: #999999;
            font-size: 24upx;
            margin-top: 20upx;
            view {
            	display: block;
            }
        }
    }
}
</style>
